<template>
    <div>
        <!-- 
        目标: 父(App.vue) -> 子(MyProduct.vue) 分别传值进入
        需求: 每次组件显示不同的数据信息
        步骤(口诀):
          1. 子组件 - props - 变量 (准备接收)
          2. 父组件 - 传值进去
       -->
        <!-- <Product title="好吃的口水鸡" price="50" intro="开业大酬宾, 全场8折"></Product>
      <Product title="好可爱的可爱多" price="20" intro="老板不在家, 全场1折"></Product>
      <Product title="好贵的北京烤鸭" price="290" :intro="str"></Product> -->

        <Product v-for="(item, index) in list" :key="item.id" :index="index" :title="item.proname" :price="item.proprice"
            :intro="item.info" @subprice="fnSubPrice">
        </Product>

    </div>
</template>
  
<script>
// 1. 创建组件 (.vue文件)
// 2. 引入组件
import Product from './MyProduct.vue'

import eventBus from '../EventBus'

export default {

    data() {
        return {
            list: [
                { id: 1, proname: "超级好吃的棒棒糖", proprice: 18.8, info: '开业大酬宾, 全场8折' },
                { id: 2, proname: "超级好吃的大鸡腿", proprice: 34.2, info: '好吃不腻, 快来买啊' },
                { id: 3, proname: "超级无敌的冰激凌", proprice: 14.2, info: '炎热的夏天, 来个冰激凌了' },
            ],
        }
    },
    // 3. 注册组件
    components: {
        Product
    },
    methods: {
        fnSubPrice(index, price) {
            this.list[index].proprice > 1 && 
            (this.list[index].proprice = (this.list[index].proprice - price).toFixed(2));
        }
    },
    created() {
        eventBus.$on("send", (index, price) => {
            this.fnSubPrice(index, price)
        })
    }
}
</script>
  
<style>
</style>